<template>
    <div class="sysm-b-modu boxsi ml50 mr50" :style="'height: '+viewHeight+'px;'">
        <div class="sysm-bmodu-box">
            <div class="pl24 pr24 h100p">

                <table cellpadding="0" cellspacing="0" width="100%" class="sysm-bmbox-table">
                    <tbody><tr><td class="pb30" colspan="3"><h3>
                            登记入区疑犯信息
                            <!-- <a href="javascript:;" class="sysm-brbbom-btn true-obj fr mt10" @click="initReadCard()">快速身份录入</a> -->
                        </h3></td></tr>
                    <tr>
                        <td width="300" rowspan="6" valign="top">
                            <div class="xxtbwel-tuser-image">
                                <div class="xxtbwel-tuimage-box"><img id="yyy" name="yyy" :src="showImgPath" width="100%" height="100%"  alt="" /></div>
                            </div>
                        </td><td width="144" align="right" class="pr20">姓名：</td>
                        <td><input type="text" id="name" v-model="dataForm.loginName" autocomplete="off"/></td>
                    </tr>
                    <tr><td align="right" class="pr20">证件类型：</td><td>
                        <div class="sysm-bmbtable-down">
                            <input type="text" class="max-box"  placeholder="选择证件类型" v-model="dataForm.identityTypeName" readonly/>
                            <ul class="sysm-bmbtdown-list" style="top: 42px;">
                                <template v-for="(item,index) in identityTypes">
                                    <li :data="item.dicItemCode" :key="index">{{item.dicItemName}}</li>
                                </template>
                            </ul>
                        </div>
                    </td></tr>
                    <tr><td align="right" class="pr20">身份证号：</td>
                        <td><input type="text" class="max-box"  v-model="dataForm.identityNo"/></td>
                    </tr>
                    <tr><td align="right" class="pr20">性别：</td><td>
                        <input type="radio" name="sex" id="sex1" value="1" v-model="dataForm.sex"/><label for="sex1">男</label>
                        <input type="radio" name="sex" id="sex2" value="2" v-model="dataForm.sex"/><label for="sex2">女</label>
                    </td></tr>
                    <!-- <tr><td align="right" class="pr20">民族：</td><td>
                        <div class="sysm-bmbtable-down">
                            <input type="text" id="national" class="max-box"  placeholder="选择民族">
                            <ul class="sysm-bmbtdown-list" style="top: 42px;">
                                    <li>汉族</li><li>蒙古族</li><li>回族</li><li>壮族</li><li>维吾尔族</li>
                            </ul>
                        </div>
                    </td></tr> -->
                    <tr><td align="right" class="pr20">出生日期：</td>
                        <td><input type="text" class="max-box" v-model="dataForm.birthday" @click.stop="popupState = true" readonly/></td>
                    </tr>
                    <tr><td align="right" class="pr20">户籍地址：</td>
                        <td><input type="text"  v-model="dataForm.hometown"  class="max-box" placeholder="请填写详细地址" tipsoft="sogouKeyboard"></td>
                    </tr>
                </tbody></table>
                <div class="mt30 text_ac">
                    <a href="javascript:;" class="sysm-brbbom-btn true-obj mt10" 
                    @click="doSave('yzsf')">验证身份</a>
                    <a href="javascript:;" class="sysm-brbbom-btn true-obj mt10" 
                    @click="doSave('hsryxx')">跳过验证</a>
                </div>
            </div>
        </div>

        <!-- <zfba-date-modu :open="true" title="选择日期" type="yyyy-mm-dd"></zfba-date-modu> -->
        <zfba-popup-modu :openState="popupState" :width="500" :height="300" @closeFun="closePopupFun" @submit="submitPopupFun">
            <zfba-date-modu @selectDate="returnSelectDateFun" :beforeYear="beforeYear"></zfba-date-modu>
        </zfba-popup-modu>

        

    </div>
</template>

<script>
import zfbaDateModu from './dateModu'
import zfbaPopupModu from './popupModu'
import {getShowImgPath} from '@/utils'

export default {
    data(){
        return {
            sfzPopupState : false,
            popupState : false,
            viewHeight : 504,
            identityTypes:[],
            showImgPath:[],
            sfzState:0,
            beforeYear:100,
            dataForm:{
                loginName:'',
                identityType:'1',
                identityTypeName:'身份证',
                identityNo:'',
                sex:'1',
                userType:'2',
                birthday:'',
                hometown:'',
                avatar:'',
                idcardPhoto:''
            }
        }
    },
    created(){
        this.dataForm.avatar = this.vtp.get('imgPath');
        let userInfo=this.vtp.get("userInfo");
        if(userInfo){
            this.dataForm=userInfo;
        }
        this.showImgPath=getShowImgPath(this.dataForm.avatar)
        this.getDicItems("identityType").then(({ data }) => {
            this.identityTypes = data;
        });
    },
    methods:{
        toRouter(o){
            this.vtp.toRouter(this,o);
        },
        returnSelectDateFun(o){
            this.dataForm.birthday = o;
        },
        sfzToggleFun(){
            if(this.sfzState == 3){
                this.sfzPopupState = false
            }else{
                this.sfzState = this.sfzState +1
            }
        },
        sfzClosePopupFun(){
            this.sfzPopupState = false;
        },
        closePopupFun(){
            this.popupState = false;
        },
        submitPopupFun(){
            this.popupState = false;
        },
        doSave(route){
            if(this.dataForm.loginName==''){
                this.$message.error('名称不能为空');
                return;
            }
            if(this.dataForm.identityType==''){
                this.$message.error('证件类型不能为空');
                return;
            }
            if(this.dataForm.identityNo==''){
                this.$message.error('证件号不能为空');
                return;
            }
            if(this.dataForm.sex==''){
                this.$message.error('性别不能为空');
                return;
            }
            if(this.dataForm.birthday==''){
                this.$message.error('出生日期不能为空');
                return;
            }
            if(this.dataForm.hometown==''){
                this.$message.error('户籍地址不能为空');
                return;
            }
            //TODO 根据身份证号获取身份证图片
            this.dataForm.idcardPhoto=this.dataForm.avatar;
            this.vtp.set("userInfo", this.dataForm);
            this.toRouter(route);
            // this.$http({
            //     url: this.$http.adornUrl(
            //         "/zfuser/zfinvolvedregistration/doSaveUserInfo"
            //     ),
            //     method: "post",
            //     data: this.$http.adornData(this.dataForm)
            // }).then(({ data }) =>{
            //     if(data&&data.code==0){
            //         this.vtp.set('userId',data.userId)
            //         this.toRouter('rqsy')
            //     }else{
            //         this.$message.error("系统异常，提交失败");
            //     }
            // })
        }
    },
    components:{
        zfbaDateModu,
        zfbaPopupModu
    },
    mounted(){
        this.viewHeight = this.vtp.winHei(166);
        window.onresize = function(){
            let pageHeiVal = tipLayout.winHei()-166;
            $('.sysm-b-modu').height(pageHeiVal);
        }
        // 下拉框start
        let _this=this;
        $('body').on('click','.sysm-bmbtable-down input',function(){
            var $p = $(this).parent();
            $(".sysm-bmbtdown-list").css("height","250px").css("overflow","auto");
            $p.addClass('open-down').children('ul').stop(true).slideDown(200)
            // $p.hasClass('open-down') ? $p.removeClass('open-down').children('ul').stop(true).slideUp(200) : $p.addClass('open-down').children('ul').stop(true).slideDown(200);
        });
        $('body').on('click','.sysm-bmbtable-down ul li',function(){
            var html = $(this).html();
            _this.dataForm.identityType=$(this).attr("data");
            _this.dataForm.identityTypeName=html;
            $(this).parents('.sysm-bmbtable-down').children('input').val(html).parent().removeClass('open-down').children('ul').stop(true).slideUp(200);
        });
        $('.sysm-bmbtable-down ul').mouseleave(function(){
            $(this).removeClass('open-down').children('ul').stop(true).slideUp(200);
        });
        // 下拉框end
    }
}
</script>

<style>

</style>